<template>
  <a-spin :spinning="spinning">
    <a-empty v-if="$isEmpty(assureInformation)" class="p-y-40"></a-empty>
    <a-space v-else direction="vertical" style="width: 100%">
      <div>
        <a-row :gutter="16" type="flex" align="middle">
          <a-col :span="6">
            <a-row type="flex" align="middle">
              <a-col :span="12">
                <span class="title">基本信息</span>
              </a-col>
              <a-col :span="12">
                <viewerImage
                  fit="contain"
                  :lazy="false"
                  :src="require('@/assets/images/assureInfo.png')"
                  style="width: 100px; height: 100px"
                ></viewerImage>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="18">
            <a-descriptions>
              <a-descriptions-item label="区县"> {{ getDeptName('RegionNo') }} </a-descriptions-item>
              <a-descriptions-item label="社区/乡镇"> {{ getDeptName('TownshipNo') }} </a-descriptions-item>
              <a-descriptions-item label="家庭（辈）"> {{ assureInformation.StrDegress }} </a-descriptions-item>
              <a-descriptions-item label="申请家庭类别"> {{ assureInformation.ApplyClass }} </a-descriptions-item>
              <a-descriptions-item label="房屋总建筑面积㎡">
                {{ assureInformation.StrLiveHousingArea }}㎡
              </a-descriptions-item>
              <a-descriptions-item label="核定保障人数"> {{ assureInformation.CityVfyNumber }} </a-descriptions-item>
              <a-descriptions-item label="核定人均面积㎡">
                {{ assureInformation.CityVfyAreaPer }}㎡
              </a-descriptions-item>
              <a-descriptions-item label="核定人均收入" v-if="assureInformation.ApplyClass === '低收入'">
                {{ assureInformation.CityVfyIncome || '/' }}
              </a-descriptions-item>
              <a-descriptions-item label="保障方式"> {{ assureInformation.CityVfyAssign }} </a-descriptions-item>
              <a-descriptions-item label="现住房性质"> {{ assureInformation.HousCategory }} </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-divider></a-divider>
      </div>
      <div>
        <p class="title m-b-24">保障成员名单</p>
        <a-table
          rowKey="ID"
          size="middle"
          :columns="assureColumns"
          :data-source="assureInformation.proposerdetail"
          :pagination="false"
          :expandIconColumnIndex="6"
          :expandIconAsCell="false"
          :expandIcon="expandIcon"
        >
          <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
          <a-tag slot="Sexs" slot-scope="text">{{ text }}</a-tag>
          <span slot="Relation" slot-scope="text">{{ text | $lable(Relation) }}</span>
          <a-descriptions slot="expandedRowRender" slot-scope="record" size="small" :column="4">
            <a-descriptions-item label="姓名"> {{ record.Name }} </a-descriptions-item>
            <a-descriptions-item label="身份证号"> {{ record.IDCards }} </a-descriptions-item>
            <a-descriptions-item label="性别"> {{ record.Sexs }} </a-descriptions-item>
            <a-descriptions-item label="出身日期">
              {{ record.Birthdays | moment('YYYY-MM-DD') }}
            </a-descriptions-item>
            <a-descriptions-item label="民族"> {{ record.Nations | $lable(Nation) }} </a-descriptions-item>
            <a-descriptions-item label="关系"> {{ record.Relation | $lable(Relation) }} </a-descriptions-item>
            <a-descriptions-item label="文化程度"> {{ record.College | $lable(College) }} </a-descriptions-item>
            <a-descriptions-item label="婚姻状况"> {{ record.Maritalstas }} </a-descriptions-item>
            <a-descriptions-item label="联系电话"> {{ record.Phones }} </a-descriptions-item>
            <a-descriptions-item label="就业情况"> {{ record.Employment }} </a-descriptions-item>
            <a-descriptions-item label="工作单位"> {{ record.WorkUnits }} </a-descriptions-item>
            <a-descriptions-item label="职业"> {{ record.Profession | $lable(Profession) }} </a-descriptions-item>
            <a-descriptions-item label="居住地址" :span="2">
              {{ `贵州省贵阳市${record.LiveDistrictAddress}${record.LiveAddresss}` }}
            </a-descriptions-item>
            <a-descriptions-item label="是否残疾" :span="record.IfDisabilitys === '否' ? 2 : 1">
              {{ record.IfDisabilitys }}
            </a-descriptions-item>
            <a-descriptions-item label="残疾类型" v-if="record.IfDisabilitys === '是'">
              {{ record.DisabilityTypes | $lable(DisabilityType) }}
            </a-descriptions-item>
            <a-descriptions-item label="残疾等级" v-if="record.IfDisabilitys === '是'">
              {{ record.DisabilityLevels | $lable(DisabilityLevel) }}
            </a-descriptions-item>
            <a-descriptions-item label="户籍信息"> {{ record.ApplyTypes }} </a-descriptions-item>
            <a-descriptions-item label="申请人所属群体">
              <a-tag v-for="item in getGroupsArr(record.GroupOfApplicants)" :key="item">{{ item }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="收入认定"> {{ assureInformation.ApplyClass }} </a-descriptions-item>
            <a-descriptions-item label="低保证号" v-if="assureInformation.ApplyClass === '低保'">
              {{ record.LowObjectNOs }}
            </a-descriptions-item>
            <a-descriptions-item label="户籍地址">
              {{ record.ProvinceAddress }}{{ record.CityAddress }}{{ record.DistrictAddress
              }}{{ record.CensusRegAddresss }}</a-descriptions-item
            >
          </a-descriptions>
        </a-table>
      </div>
      <div>
        <p class="title m-y-24">未纳入保障成员名单</p>
        <a-table
          rowKey="ID"
          size="middle"
          :columns="unAssureColumns"
          :data-source="assureInformation.proposerfdetail"
          :pagination="false"
        >
          <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
          <span slot="FRelation" slot-scope="text">{{ text }}</span>
        </a-table>
      </div>
      <div v-if="['自有产权房', '承租公房'].includes(assureInformation.HousCategory)">
        <p class="title m-y-24">住房情况填写</p>
        <a-table
          rowKey="ID"
          size="middle"
          :columns="assureInformation.HousCategory === '自有产权房' ? zycqColumns : czgfColumns"
          :data-source="assureInformation.proposerdetailhouses"
          :pagination="false"
        >
          <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
          <a-descriptions
            v-if="assureInformation.HousCategory === '自有产权房'"
            slot="expandedRowRender"
            slot-scope="record"
            size="small"
            :column="4"
          >
            <a-descriptions-item label="成员类别"> {{ record.DetailCategory }} </a-descriptions-item>
            <a-descriptions-item label="自有产权房产权人姓名"> {{ record.PropertyName }} </a-descriptions-item>
            <a-descriptions-item label="自有产权房建筑面积"> {{ record.PropertyArea }}m² </a-descriptions-item>
            <a-descriptions-item label="自有产权房个人产权面积"> {{ record.PropertyOwnArea }}m² </a-descriptions-item>
            <a-descriptions-item label="自有产权房证号"> {{ record.PropertyNo }} </a-descriptions-item>
            <a-descriptions-item label="房屋详细地址"> {{ record.HouseAddress }} </a-descriptions-item>
            <a-descriptions-item label="成套情况"> {{ record.IfComplete }} </a-descriptions-item>
            <a-descriptions-item label="说明"> {{ record.Remark }} </a-descriptions-item>
          </a-descriptions>
          <a-descriptions v-else slot="expandedRowRender" slot-scope="record" size="small" :column="4">
            <a-descriptions-item label="成员类别"> {{ record.DetailCategory }} </a-descriptions-item>
            <a-descriptions-item label="公房所有权单位名称"> {{ record.PublicUnit }} </a-descriptions-item>
            <a-descriptions-item label="租住公房建筑面积"> {{ record.PublicArea }}m² </a-descriptions-item>
            <a-descriptions-item label="房屋详细地址"> {{ record.HouseAddress }} </a-descriptions-item>
            <a-descriptions-item label="成套情况"> {{ record.IfComplete }} </a-descriptions-item>
            <a-descriptions-item label="说明"> {{ record.Remark }} </a-descriptions-item>
          </a-descriptions>
        </a-table>
      </div>
    </a-space>
  </a-spin>
</template>

<script>
import { viewerImage } from '@/components'
import { getDropdownList } from '@/api/common'
import { getDeptDropList } from '@/api/communityReviewManagement'
import { validNumber } from '@/utils/validate'
import { getLeaseholderDetail } from '@/api/DistrictReviewReportManagement'
const findItem = (data, value, key = 'DROPKEY', label = 'DROPVALUE') => {
  if (validNumber(value)) {
    value = Number(value)
  }
  const item = data.find((e) => e[key] === value)
  if (!item) return ''
  return item[[label]]
}
export default {
  // name: 'cityComplexInquireList',
  components: {
    viewerImage,
  },
  props: {
    applyNO: {
      type: String,
      default: '',
    },
    houseID: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      assureInformation: {},
      spinning: false,
      DeptList: [],
      Nation: [],
      Relation: [
        {
          DROPKEY: 0,
          DROPVALUE: '申请人',
        },
      ],
      College: [],
      Profession: [],
      DisabilityType: [],
      DisabilityLevel: [],
      Groups: [],
      // 保障成员
      assureColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'Name',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'Sexs',
          align: 'center',
          scopedSlots: { customRender: 'Sexs' },
        },
        {
          title: '身份证号',
          key: 'IDCards',
          dataIndex: 'IDCards',
          align: 'center',
        },
        {
          title: '户籍信息',
          dataIndex: 'ApplyTypes',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'Relation',
          align: 'center',
          scopedSlots: { customRender: 'Relation' },
        },
      ],
      // 未纳入保障成员
      unAssureColumns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'FName',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'FIDCard',
          align: 'center',
        },
        {
          title: '户籍信息',
          dataIndex: 'Category',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'FRelation',
          scopedSlots: { customRender: 'FRelation' },
          align: 'center',
        },
      ],
      // 承租公房
      czgfColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '成员类别',
          key: 'DetailCategory',
          dataIndex: 'DetailCategory',
          align: 'center',
        },
        {
          title: '姓名',
          key: 'DetailName',
          dataIndex: 'DetailName',
          align: 'center',
        },
        {
          title: '公司所有权单位名称',
          key: 'PublicUnit',
          dataIndex: 'PublicUnit',
          align: 'center',
        },
        {
          title: '租住公房建筑面积(m²)',
          key: 'PublicArea',
          dataIndex: 'PublicArea',
          align: 'center',
        },
      ],
      zycqColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '成员类别',
          key: 'DetailCategory',
          dataIndex: 'DetailCategory',
          align: 'center',
        },
        {
          title: '姓名',
          key: 'DetailName',
          dataIndex: 'DetailName',
          align: 'center',
        },
        {
          title: '自有产权房产权人姓名',
          key: 'PropertyName',
          dataIndex: 'PropertyName',
          align: 'center',
        },
        {
          title: '自有产权房建筑面积(m²)',
          key: 'PropertyArea',
          dataIndex: 'PropertyArea',
          align: 'center',
        },
        {
          title: '自有产权房个人产权面积(m²)',
          key: 'PropertyOwnArea',
          dataIndex: 'PropertyOwnArea',
          align: 'center',
        },
      ],
    }
  },
  filters: {
    $lable(value, data, key, label) {
      return findItem(data, value, key, label)
    },
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    expandIcon(props) {
      if (props.expanded) {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <y-button
            type="link"
            onClick={(e) => {
              props.onExpand(props.record, e)
            }}
          >
            收起
          </y-button>
        )
      } else {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <y-button
            type="link"
            onClick={(e) => {
              props.onExpand(props.record, e)
            }}
          >
            查看
          </y-button>
        )
      }
    },
    fetchData() {
      this.spinning = true
      const getNewProposer = getLeaseholderDetail({
        id: this.houseID,
      })
      const getDeptList = getDeptDropList({ userid: this.$store.getters.userid })
      const getNation = getDropdownList({ PmKey: 'Nation' })
      const getRelation = getDropdownList({ PmKey: 'Relation' })
      const getCollege = getDropdownList({ PmKey: 'College' })
      const getProfession = getDropdownList({ PmKey: 'Profession' })
      const getDisabilityType = getDropdownList({ PmKey: 'DisabilityType' })
      const getDisabilityLevel = getDropdownList({ PmKey: 'DisabilityLevel' })
      const getGroups = getDropdownList({ PmKey: 'Groups' })
      Promise.all([
        getNewProposer,
        getDeptList,
        getNation,
        getRelation,
        getCollege,
        getProfession,
        getDisabilityType,
        getDisabilityLevel,
        getGroups,
      ])
        .then((res) => {
          this.assureInformation = res[0]
          this.DeptList = res[1][0].children
          this.Nation = res[2]
          this.Relation.push(...res[3])
          this.College = res[4]
          this.Profession = res[5]
          this.DisabilityType = res[6]
          this.DisabilityLevel = res[7]
          this.Groups = res[8]
        })
        .finally(() => {
          this.spinning = false
        })
    },
    getDeptName(key) {
      if (this.$isEmpty(this.DeptList)) return ''
      const RegionNo = this.assureInformation.RegionNo
      const TownshipNo = this.assureInformation.TownshipNo
      if (key === 'RegionNo') {
        return findItem(this.DeptList, RegionNo, 'ID', 'name')
      }
      if (key === 'TownshipNo') {
        const deptItem = this.DeptList.find((e) => e.ID === Number(RegionNo))
        return findItem(deptItem.children, TownshipNo, 'ID', 'name')
      }
      return ''
    },
    getGroupsArr(GroupOfApplicants) {
      const labelArr = []
      if (!this.$isEmpty(this.Groups) && !this.$isEmpty(GroupOfApplicants)) {
        GroupOfApplicants = GroupOfApplicants.split(',').forEach((e) => {
          this.Groups.forEach((item) => {
            if (item.DROPKEY === Number(e)) {
              labelArr.push(item.DROPVALUE)
            }
          })
        })
      }
      return labelArr
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
</style>
